<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        #table tr td {
            width: 115px;
            text-align: center
        }
        #table tr:nth-of-type(even){
            background-color: rgb(214, 151, 34) !important ;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" placeholder="张三123" /></p>
            <p>年龄<input id="age" type="text" placeholder="21" /></p>
            <p>性别
                <select id="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="秘密">你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script>
        var unameEle = document.getElementById("username");
        var ageEle = document.getElementById("age");
        var genderEle = document.getElementById("gender");
        var addBtn = document.querySelector("#addBtn");
        var sortBtn = document.querySelector("#sortBtn");
        var tabEle = document.querySelector("#table");
        var bodyEle = document.querySelector("#table tbody");
        addBtn.onclick = function () {
            var arr = [unameEle.value,ageEle.value,genderEle.value];
            var tr = document.createElement("tr");
            arr.forEach(function( item , key ){
                var td = document.createElement("td");
                td.innerHTML = item ;
                tr.appendChild(td);
            });
            var tdDel = document.createElement("td");
            var btnDel = document.createElement("button");
            btnDel.innerHTML = '删除' ;
            btnDel.onclick = function (){
                tr.remove();
            }
            tdDel.appendChild(btnDel);
            tr.appendChild(tdDel);
            bodyEle.appendChild(tr);
        }
        sortBtn.onclick = function (){
            var trDataArr = Array.from( tabEle.children[1].children );
            var newArr = [] ;
            trDataArr.forEach(function( trEle , key , arr ){
                var newObj = {} ; 
                newObj.age = trEle.children[1].innerHTML ; 
                newObj.arr = trEle ;
                newArr.push(newObj);
            })
            bubSort(newArr).forEach(function(item,key){
                bodyEle.appendChild(item.arr) ;              
            })
        }
        function bubSort( arr ) {
            for ( var i = 0 ; i < arr.length ; i ++ ){
                for ( var j = 0 ; j < arr.length - 1 ; j ++ ){
                    if ( parseInt(arr[j].age) > parseInt(arr[j+1].age) ) {              //控制升序还是降序   > 升   < 降
                        var temp = arr[j] ; 
                        arr[j] = arr[j + 1] ;
                        arr[j + 1] = temp ;
                    }
                }
            }
            return arr ;
        }
    </script>
</body>
</html>